<template>
	<view class="xzy-navbar" :style="{ 'background': bgColor}">
		<!-- #ifndef H5 -->
		<view class="status_bar" :style="{'height':getStatusBarHeight()+'px'}"></view>
		<!-- #endif -->
		<view class="navbar" :style="{'height':getTitleBarHeight()+'px'}">
			<view class="left-container">
				<slot name="left">
					<uv-icon name="arrow-left" :color="leftIconColor" size="20" bold @click="goBack"></uv-icon>
				</slot>
			</view>
			<view class="title-container">
				<slot name="center"></slot>
			</view>
			<view class="right-container">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		nextTick,
		ref
	} from 'vue'
	import {
		isDesktopSafari
	} from "@/utils/index.js"
	import {
		getStatusBarHeight,
		getTitleBarHeight
	} from '@/utils/system.js'

	const props = defineProps({
		bgColor: {
			type: String,
			default: 'linear-gradient( 180deg, #D7D4FF 0%, #F7F8FB 100%)'
		},
		leftIconColor: {
			type: String,
			default: '#222222'
		},
	})

	function goBack() {
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.xzy-navbar {
		display: flex;
		justify-content: space-between;
		// padding: 20rpx 20rpx 30rpx;
		align-items: center;
		// width: calc(100% - 40rpx) !important;
		flex-direction: column;

		.navbar {
			width: calc(100% - 40rpx) !important;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			padding: 0 20rpx;

			.left-container,
			.right-container {
				flex: 1;
				/* 各占剩余空间的一半，确保标题居中 */
				display: flex;
				align-items: center;
				/* 垂直居中 */
			}

			.left-container {
				justify-content: flex-start;
				/* 左对齐 */
			}

			.right-container {
				justify-content: flex-end;
				/* 右对齐 */
			}

			.title-container {
				position: absolute;
				left: 50%;
				/* 定位到父容器中间 */
				transform: translateX(-50%);
				/* 向左偏移自身宽度的一半 */
				font-size: 32rpx;
				/* 标题字体大小 */
				white-space: nowrap;
				/* 防止换行 */
			}
		}

	}

	// .status_bar {
	// 	height: var(--status-bar-height);
	// 	width: 100%;
	// 	opacity: 0;
	// }
</style>